<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<html>
<head>
    <title>菜单管理</title>
    <meta name="decorator" content="default"/>
    <%@include file="/WEB-INF/views/include/treetable.jsp" %>

    <script type="text/javascript">
        $(document).ready(function () {
//			$("#treeTable").treeTable({expandLevel : 3}).show();

            $("body").addClass("gray-bg");

            $("#treeTable").treeTable({
                expandLevel: 1,
                column: 1,
                beforeExpand: function ($treeTable, id) {
                    //判断id是否已经有了孩子节点，如果有了就不再加载，这样就可以起到缓存的作
                    if ($('.' + id, $treeTable).length) {
                        return;
                    }
                    console.info(id);
                    $.ajax({
                        type: 'POST',
                        dataType: "html",
                        url: '${ctx}/sys/menu/getChildenList',
                        data: {"id": id},
                        success: function (jsonData) {
                            $treeTable.addChilds(jsonData);
                        }
                    });
                }
            });
        });

        function updateSort() {
            loading('正在提交，请稍等...');
            $("#listForm").attr("action", "${ctx}/sys/menu/updateSort");
            $("#listForm").submit();
        }
    </script>
</head>
<body>
<%--<ul class="nav nav-tabs">--%>
<%--<li class="active"><a href="${ctx}/sys/menu/">菜单列表</a></li>--%>
<%--<shiro:hasPermission name="sys:menu:edit"><li><a href="${ctx}/sys/menu/form">菜单添加</a></li></shiro:hasPermission>--%>
<%--</ul>--%>
<div class="wrapper wrapper-content">
    <div class="ibox">
        <div class="ibox-title">
            <h5>菜单列表 </h5>
        </div>
        <div class="ibox-content">
            <!-- 0:隐藏tip, 1隐藏box,不设置显示全部 -->
            <script type="text/javascript">top.$.jBox.closeTip();</script>

            <!-- 工具栏 -->
            <div class="row">
                <div class="col-sm-12">
                    <div class="pull-left">
                        <shiro:hasPermission name="sys:menu:edit">
                            <button class="btn btn-white btn-sm" data-toggle="tooltip" data-placement="left"
                                    onclick="add()" title="添加"><i class="fa fa-plus"></i> 添加
                            </button>
                            <script type="text/javascript">
                                function add() {
                                    openDialog("新增" + '菜单', "${ctx}/sys/menu/form", "800px", "500px", "");

//                                    if(''==null || ''==''){
//
//                                    }else{
//                                        window.location = "/jf/sys/menu/form";
//                                    }
                                }
                            </script>
                            <!-- 增加按钮 -->

                            <button class="btn btn-white btn-sm" data-toggle="tooltip" data-placement="left"
                                    onclick="edit()" title="修改"><i class="fa fa-file-text-o"></i> 修改
                            </button>
                            </button>
                            <script type="text/javascript">
                                $(document).ready(function () {
                                    $('#treeTable thead tr th input.i-checks').on('ifChecked', function (event) { //ifCreated 事件应该在插件初始化之前绑定
                                        $('#treeTable tbody tr td input.i-checks').iCheck('check');
                                    });
                                    $('#treeTable thead tr th input.i-checks').on('ifUnchecked', function (event) { //ifCreated 事件应该在插件初始化之前绑定
                                        $('#treeTable tbody tr td input.i-checks').iCheck('uncheck');
                                    });

                                });

                                function edit() {
                                    var size = $("#treeTable tbody tr td input.i-checks:checked").size();
                                    if (size == 0) {
                                        top.layer.alert('请至少选择一条数据!', {icon: 0, title: '警告'});
                                        return;
                                    }
                                    if (size > 1) {
                                        top.layer.alert('只能选择一条数据!', {icon: 0, title: '警告'});
                                        return;
                                    }
                                    var id = $("#treeTable tbody tr td input.i-checks:checkbox:checked").attr("id");

                                    if ('' == null || '' == '') {
                                        openDialog("修改" + '菜单', "${ctx}/sys/menu/form?id=" + id, "800px", "500px", "");
                                    } else {
                                        window.location = "${ctx}/sys/menu/form?id=" + id;
                                    }
                                }
                            </script>
                            <!-- 编辑按钮 -->


                            <button class="btn btn-white btn-sm" onclick="deleteAll()" data-toggle="tooltip"
                                    data-placement="top"><i class="fa fa-trash-o"> 删除</i>
                            </button>
                            <script type="text/javascript">
                                $(document).ready(function () {
                                    $('#treeTable thead tr th input.i-checks').on('ifChecked', function (event) { //ifCreated 事件应该在插件初始化之前绑定
                                        $('#treeTable tbody tr td input.i-checks').iCheck('check');
                                    });
                                    $('#treeTable thead tr th input.i-checks').on('ifUnchecked', function (event) { //ifCreated 事件应该在插件初始化之前绑定
                                        $('#treeTable tbody tr td input.i-checks').iCheck('uncheck');
                                    });

                                });

                                function deleteAll() {
                                    // var url = $(this).attr('data-url');
                                    var str = "";
                                    var ids = "";
                                    $("#treeTable tbody tr td input.i-checks:checkbox").each(function () {
                                        if (true == $(this).is(':checked')) {
                                            str += $(this).attr("id") + ",";
                                        }
                                    });
                                    if (str.substr(str.length - 1) == ',') {
                                        ids = str.substr(0, str.length - 1);
                                    }
                                    if (ids == "") {
                                        top.layer.alert('请至少选择一条数据!', {icon: 0, title: '警告'});
                                        return;
                                    }
                                    top.layer.confirm('确认要彻底删除数据吗?', {icon: 3, title: '系统提示'}, function (index) {
                                        window.location = "${ctx}/sys/menu/deleteAll?ids=" + ids;
                                        top.layer.close(index);
                                    });

                                }
                            </script>
                            <!-- 删除按钮 -->


                            <button id="btnSubmit" class="btn btn-white btn-sm " data-toggle="tooltip"
                                    data-placement="left" onclick="updateSort()" title="保存排序"><i class="fa fa-save"></i>
                                保存排序
                            </button>
                        </shiro:hasPermission>
                        <button class="btn btn-white btn-sm " data-toggle="tooltip" data-placement="left"
                                onclick="refresh()" title="刷新"><i class="glyphicon glyphicon-repeat"></i> 刷新
                        </button>
                    </div>
                </div>
            </div>


            <sys:message content="${message}"/>
            <form id="listForm" method="post">
                <table id="treeTable"
                       class="table table-striped table-bordered table-hover table-condensed dataTables-example dataTable">
                    <thead>
                    <tr>
                        <th><input type="checkbox" class="i-checks"></th>
                        <th>名称</th>
                        <th>链接</th>
                        <th style="text-align:center;">排序</th>
                        <th>可见</th>
                        <th>权限标识</th>
                        <shiro:hasPermission name="sys:menu:edit">
                            <th>操作</th>
                        </shiro:hasPermission>
                    </tr>
                    </thead>
                    <tbody>
                    <c:forEach items="${list}" var="menu">
                        <tr id="${menu.id}" pId="${menu.parent.id ne '1'?menu.parent.id:'0'}">
                            <td><input type="checkbox" id="${menu.id}" class="i-checks"></td>
                            <td nowrap>
                                <i class="icon-${not empty menu.icon?menu.icon:' hide'}"></i>
                                <a href="#"
                                   onclick="openDialogView('查看菜单', '${ctx}/sys/menu/form?id=${menu.id}','800px', '500px')">${menu.name}</a>
                            </td>
                            <td title="${menu.href}">${fns:abbr(menu.href,30)}</td>
                            <td style="text-align:center;">
                                <shiro:hasPermission name="sys:menu:edit">
                                    <input type="hidden" name="ids" value="${menu.id}"/>
                                    <input name="sorts" type="text" value="${menu.sort}"
                                           style="width:50px;margin:0;padding:0;text-align:center;">
                                </shiro:hasPermission>
                                <shiro:lacksPermission name="sys:menu:edit">
                                    ${menu.sort}
                                </shiro:lacksPermission>
                            </td>
                            <td>${menu.isShow eq '1'?'显示':'隐藏'}</td>
                            <td title="${menu.permission}">${fns:abbr(menu.permission,30)}</td>

                            <shiro:hasPermission name="sys:menu:edit">
                                <td nowrap>
                                    <a href="#"
                                       onclick="openDialogView('查看菜单', '${ctx}/sys/menu/form?id=${menu.id}','800px', '500px')"
                                       class="btn btn-info btn-xs"><i class="fa fa-search-plus"></i> <span
                                            class="hidden-xs">查看</span></a>
                                        <%--<a href="${ctx}/sys/menu/form?id=${menu.id}">修改</a>--%>
                                    <a href="#"
                                       onclick="openDialog('修改菜单', '${ctx}/sys/menu/form?id=${menu.id}','800px', '500px')"
                                       class="btn btn-success btn-xs"><i class="fa fa-edit"></i> <span
                                            class="hidden-xs">修改</span></a>

                                        <%--<a href="${ctx}/sys/menu/delete?id=${menu.id}" onclick="return confirmx('要删除该菜单及所有子菜单项吗？', this.href)">删除</a>--%>
                                    <a href="${ctx}/sys/menu/delete?id=${menu.id}"
                                       onclick="return confirmx('要删除该菜单及所有子菜单项吗？', this.href)"
                                       class="btn btn-danger btn-xs"><i class="fa fa-trash"></i> <span
                                            class="hidden-xs">删除</span></a>

                                        <%--<a href="${ctx}/sys/menu/form?parent.id=${menu.id}">添加下级菜单</a>--%>
                                    <a href="#"
                                       onclick="openDialog('添加下级菜单', '${ctx}/sys/menu/form?parent.id=${menu.id}','800px', '500px')"
                                       class="btn btn-primary btn-xs"><i class="fa fa-plus"></i> <span
                                            class="hidden-xs">添加下级菜单</span></a>
                                </td>
                            </shiro:hasPermission>
                        </tr>
                    </c:forEach></tbody>
                </table>
            </form>
        </div>
    </div>
</div>
</body>
</html>